<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 定义组件接收的props
const props = defineProps({
  post: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      title: '',
      content: '',
      author: '',
      avatar: '',
      views: 0,
      likes: 0,
      replies: 0,
      time: '',
      category: ''
    })
  },
  // 是否显示分类标签
  showCategory: {
    type: Boolean,
    default: true
  }
})

// 分类映射
const categoryMap = {
  'pet': '宠物',
  'tech': '电子产品',
  'education': '教育',
  'travel': '旅游',
  'food': '美食',
  'health': '健康',
  'finance': '理财',
  'lifestyle': '生活方式'
}

// 是否点赞
const isLiked = ref(false)

// 处理帖子点击
const handlePostClick = () => {
  router.push({
    path: `/post/${props.post.id}`,
    query: { category: props.post.category }
  })
}

// 处理点赞
const handleLike = (event) => {
  event.stopPropagation()
  isLiked.value = !isLiked.value
}

// 格式化数字
const formatNumber = (num) => {
  if (num < 1000) {
    return num
  } else if (num < 10000) {
    return (num / 1000).toFixed(1) + 'k'
  } else {
    return (num / 10000).toFixed(1) + 'w'
  }
}

// 格式化时间
const formatTime = (timeString) => {
  const now = new Date()
  const time = new Date(timeString)
  const diffMs = now - time
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)
  
  if (diffMins < 1) {
    return '刚刚'
  } else if (diffMins < 60) {
    return `${diffMins}分钟前`
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return time.toLocaleDateString('zh-CN')
  }
}

// 截取内容摘要
const getContentSummary = (content, maxLength = 100) => {
  // 移除换行符和多余空格
  const plainText = content.replace(/\n/g, ' ').trim()
  if (plainText.length <= maxLength) {
    return plainText
  }
  return plainText.substring(0, maxLength) + '...'
}
</script>

<template>
  <div class="post-card" @click="handlePostClick">
    <!-- 分类标签 -->
    <div v-if="showCategory" class="category-tag">
      {{ categoryMap[post.category] || '其他' }}
    </div>
    
    <!-- 帖子内容 -->
    <div class="post-content">
      <h3 class="post-title">{{ post.title }}</h3>
      <p class="post-summary">{{ getContentSummary(post.content) }}</p>
    </div>
    
    <!-- 帖子底部 -->
    <div class="post-footer">
      <!-- 用户信息 -->
      <div class="user-info">
        <img :src="post.avatar" alt="用户头像" class="user-avatar">
        <span class="user-name">{{ post.author }}</span>
      </div>
      
      <!-- 互动数据 -->
      <div class="post-stats">
        <button class="stat-item like-btn" @click="handleLike">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ formatNumber(post.likes) }}</span>
        </button>
        <div class="stat-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ formatNumber(post.replies) }}</span>
        </div>
        <div class="stat-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ formatNumber(post.views) }}</span>
        </div>
        <div class="stat-item time">
          {{ formatTime(post.time) }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 帖子卡片样式 */
.post-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 分类标签 */
.category-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #3498db;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
}

/* 帖子内容 */
.post-content {
  flex: 1;
  margin-bottom: 16px;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-summary {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 帖子底部 */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.user-name {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 互动数据 */
.post-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
  transition: color 0.2s;
}

.stat-item.like-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.stat-item.like-btn:hover {
  color: #e74c3c;
}

.stat-item.time {
  color: #999;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .post-card {
    padding: 16px;
  }
  
  .post-title {
    font-size: 16px;
  }
  
  .post-summary {
    font-size: 13px;
  }
  
  .post-stats {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .post-card {
    padding: 14px;
    margin-bottom: 12px;
  }
  
  .post-title {
    font-size: 15px;
  }
  
  .post-summary {
    font-size: 12px;
  }
  
  .user-avatar {
    width: 24px;
    height: 24px;
  }
  
  .user-name {
    font-size: 13px;
  }
  
  .post-stats {
    gap: 8px;
  }
  
  .stat-item {
    font-size: 11px;
  }
}
</style>